<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/my-components.css" />
    <script src="js/vue.js"></script>
    <style type="text/css">
        a {
            color: white;
            font-size: 18px;
            background: #00BFFF;
            border: #00BFFF 1px solid;
            padding: 3px 15px;
            text-decoration: none;
            border-radius: 3px;
        }
        a:hover {
            background: white;
            color: #00BFFF;
        }
    </style>
</head>
<body>
    <div id="app-21">
        <!-- 组件的引用必须在 vue 实例指定的容器中 -->
        <header-bar :name="message" @my-event="parentMethod">
            <div>
                <a href="#">首页</a>
                <a href="#">后台</a>
                <a href="#">管理</a>
                <a href="#">关于</a>
            </div>
        </header-bar>
        子组件传到父组件的标题名称: {{title}}
        <hr />
    </div>
    <script src="js/my-components-bar-slot.js"></script>
    <script type="text/javascript">

        var vm = new Vue({
            el: '#app-21',
            data: {
                message: "貂蝉",
                title: ""
            },
            methods: {
                parentMethod: function (res) {
                    vm.title = res;
                }
            }
        })
    </script>
</body>
</html>